<!DOCTYPE html>
<html>
	<head>
	<meta content="text/html; charset=utf-8"/>
	<title>Header and footer</title>
</head>
<body>

<div data-role="page" class="type-interior" data-theme="a">
    <div data-role="header" data-theme="a" data-position="fixed" data-tap-toggle="false">
    <span class="ui-app-title">Be inspired by WP8</span>
    <h1>Toolbars</h1>
</div>

	<div data-role="content" data-theme="a">
        <h2>Header</h2>
        You can use additional <em>ui-app-title</em> class to specify application title, for example<br/>
        <h5>
        &lt;div data-role=&quot;page&quot;&gt;<br/>
        &lt;div data-role=&quot;header&quot;&gt;<br/>
        &lt;span class=&quot;ui-app-title&quot;&gt;Be inspered by WP8&lt;/span&gt;<br/>
        ...<br/>
        &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
        </h5>
        <h2>Footer</h2>
        Here is more text so you can see how header and footer change their position during scrolling. Here is more text so you can see how header and footer change their position during scrolling. Here is more text so you can see how header and footer change their position during scrolling.

    </div>

        <div data-role="footer" data-position="fixed">
            <div data-role="navbar" data-iconpos="top">
                <ul>
                    <li><a href="#" data-icon="plus">Add</a></li>
                    <li><a href="#" data-icon="minus">Remove</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->
</div>
</body>
</html>
